import "package:ct_pa_majordomo/utils/stacker.dart";
import 'package:flutter/material.dart';
import 'package:ct_pa_majordomo/widgets/normal_scaffold/index.dart';
import 'package:ct_pa_majordomo/config/theme_vars.dart';
import 'package:ct_pa_majordomo/widgets/empty_data/index.dart';
import 'package:ct_pa_majordomo/router/keys.dart';
import 'package:ct_pa_majordomo/pages/bill/widgets/show_multi_date_picker.dart';
import 'package:ct_pa_majordomo/utils/date_tools.dart';

class OnlinePaymentPage extends StatefulWidget {
  const OnlinePaymentPage({super.key});

  @override
  State<OnlinePaymentPage> createState() => _OnlinePaymentPageState();
}

class _OnlinePaymentPageState extends State<OnlinePaymentPage> {
  String selectedMonth = "2025.05";
  double totalIncome = 13900.00;
  double totalExpense = 69.50;
  DateTime? _startDate;
  DateTime? _endDate;

  // 示例数据
  final List<Map<String, dynamic>> records = [
    {
      "type": "手续费",
      "date": "2025-05-30",
      "dateTime": "2025.05.30 06:33:26",
      "room": "劲叶公寓0502",
      "amount": -2.80,
      "payer": "18727492142",
      "orderId": "202505301748557998937tma1g",
      "payType": "线上",
      "group": "分组一",
    },
    {
      "type": "502(20/37)",
      "date": "2025-05-30",
      "dateTime": "2025.05.30 06:33:26",
      "room": "劲叶公寓0502",
      "amount": 500.00,
      "payer": "18727492142",
      "orderId": "202505301748557998937tma1g",
      "payType": "线上",
      "group": "分组一",
    },
    {
      "type": "手续费",
      "date": "2025-05-29",
      "dateTime": "2025.05.29 08:12:10",
      "room": "劲叶公寓0310",
      "amount": -3.50,
      "payer": "18727492143",
      "orderId": "202505290812109876543tma1g",
      "payType": "线上",
      "group": "分组二",
    },
    {
      "type": "310(17/47)",
      "date": "2025-05-29",
      "dateTime": "2025.05.29 08:12:10",
      "room": "劲叶公寓0310",
      "amount": 700.00,
      "payer": "18727492143",
      "orderId": "202505290812109876543tma1g",
      "payType": "线上",
      "group": "分组二",
    },
    {
      "type": "手续费",
      "date": "2025-05-29",
      "dateTime": "2025.05.29 09:20:00",
      "room": "劲叶公寓0309",
      "amount": -3.30,
      "payer": "18727492144",
      "orderId": "202505290920001234567tma1g",
      "payType": "线上",
      "group": "分组三",
    },
    {
      "type": "租金(5/25)",
      "date": "2025-05-29",
      "dateTime": "2025.05.29 09:20:00",
      "room": "劲叶公寓0309",
      "amount": 660.00,
      "payer": "18727492144",
      "orderId": "202505290920001234567tma1g",
      "payType": "线上",
      "group": "分组三",
    },
    {
      "type": "手续费",
      "date": "2025-05-28",
      "dateTime": "2025.05.28 10:00:00",
      "room": "劲叶公寓0409",
      "amount": -3.25,
      "payer": "18727492145",
      "orderId": "202505281000009876543tma1g",
      "payType": "线上",
      "group": "分组四",
    },
  ];

  @override
  Widget build(BuildContext context) {
    return NormalScaffold(
      title: "线上支付",
      actions: [
        TextButton(
          onPressed: () {
            Stacker.pushNamed(Keys.PAY_SETTING);
          },
          child: const Text("支付设置", style: TextStyle(color: Colors.white)),
        ),
      ],
      child: Column(
        children: [
          // 月份选择和汇总
          Padding(
            padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
            child: Row(
              children: [
                GestureDetector(
                  onTap: () {
                    showMultiDatePicker(
                      context: context,
                      type: DateTimeType.range,
                      startDate: _startDate,
                      endDate: _endDate,
                      onchange: (List<String> range) {
                        setState(() {
                          _startDate = DateTime.parse(range[0]);
                          _endDate = DateTime.parse(range[1]);
                        });
                        // TODO: 根据区间筛选数据
                      },
                    );
                  },
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                    decoration: BoxDecoration(
                      color: const Color(0xFFF5F6FA),
                      borderRadius: BorderRadius.circular(16),
                    ),
                    child: Row(
                      children: [
                        Icon(Icons.date_range, size: 16, color: Colors.blueGrey),
                        const SizedBox(width: 4),
                        Text(
                          _startDate != null && _endDate != null
                              ? "${DateTools.formatYMD(_startDate)} 至 ${DateTools.formatYMD(_endDate)}"
                              : "选择日期区间",
                          style: const TextStyle(fontSize: 13, color: Colors.black87),
                        ),
                        const Icon(Icons.arrow_drop_down, size: 18, color: Colors.grey),
                      ],
                    ),
                  ),
                ),
                const Spacer(),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Text("收入：", style: TextStyle(fontSize: 12)),
                        Text(
                          totalIncome.toStringAsFixed(2),
                          style: TextStyle(color: Colors.green, fontSize: 12, fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                    Row(
                      children: [
                        Text("支出：", style: TextStyle(fontSize: 12)),
                        Text(totalExpense.toStringAsFixed(2), style: TextStyle(color: Colors.red, fontSize: 12, fontWeight: FontWeight.bold)),
                      ],
                    ),
                  ],
                )
              ],
            ),
          ),
          Expanded(
            child: records.isEmpty
                ? const EmptyData()
                : ListView.separated(
                    padding: const EdgeInsets.all(16),
                    itemCount: records.length,
                    separatorBuilder: (_, __) => const SizedBox(height: 12),
                    itemBuilder: (context, index) {
                      final item = records[index];
                      final isIncome = item["amount"] > 0;
                      return GestureDetector(
                        onTap: () {
                          Navigator.of(context).pushNamed(
                            Keys.ONLINE_PAY_RECORD_DETAIL,
                            arguments: {"record": item},
                          );
                        },
                        child: Container(
                          padding: const EdgeInsets.all(12),
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(8),
                          ),
                          child: Row(
                            children: [
                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(item["type"], style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
                                    const SizedBox(height: 4),
                                    Text("时间：${item["date"]}", style: const TextStyle(fontSize: 13, color: Colors.grey)),
                                    const SizedBox(height: 2),
                                    Text(item["room"], style: const TextStyle(fontSize: 13, color: Colors.grey)),
                                  ],
                                ),
                              ),
                              Text(
                                "${isIncome ? "+" : ""}${item["amount"].toStringAsFixed(2)}元",
                                style: TextStyle(
                                  color: isIncome ? Colors.green : Colors.red,
                                  fontSize: 16,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ],
                          ),
                        ),
                      );
                    },
                  ),
          ),
        ],
      ),
    );
  }
}